<template>
    <div class="container">
        <Navbar title="消费订单详情" left-text="返回" left-arrow @click-left="goBack" fixed placeholder></Navbar>

        <div class="main">
            <div class="main-top">
                <van-icon name="gold-coin" color="#f1bf25" size="2rem" />
                <div class="main_content" v-if="info.cash > 0">
                    <p>付款金额</p>
                    <h1>-{{ info.cash }}</h1>
                </div>
                <div class="main_content" v-else>
                    <p>付款积分</p>
                    <h1>-{{ info.point }}</h1>
                </div>
            </div>

            <van-cell-group :border="false">
                <van-cell>
                    <template #title>
                        <span class="custom-r" style="color: ##b1889d;">当前状态</span>
                        <span class="">{{ info.state_text }}</span>
                    </template>
                </van-cell>

                <van-cell>
                    <template #title>
                        <span class="custom-r" style="color: ##b1889d;">支付方式</span>
                        <span class="">微信支付</span>
                    </template>
                </van-cell>

                <van-cell>
                    <template #title>
                        <span class="custom-r" style="color: ##b1889d;">转账时间</span>
                        <span class="">{{ info.createtime }}</span>
                    </template>
                </van-cell>

                <van-cell>
                    <template #title>
                        <span class="custom-r" style="color: ##b1889d;">账单备注</span>
                        <span class="">{{ info.content }}</span>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>

        <div class="footer mt">
            <van-cell-group :border="false">
                <van-cell title="账单服务"></van-cell>
            </van-cell-group>

            <div class="content">
                <div class="item">
                    <van-icon name="question-o" />
                    <span>对订单有疑惑</span>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import Navbar from "../Navbar.vue";

export default {
    name: 'RecordInfo',
    data() {
        return {
            recordId: 0,
            info: {}
        }
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        async init() {
            let res = await this.$api.initRecord({ id: this.recordId });

            console.log(res);

            if (res.code === 1) {
                this.info = res.data
            } else {
                console.log(res.msg);
            }
        }
    },
    created() {
        this.recordId = this.$route.query.recordId ? this.$route.query.recordId : 0;

        this.init()
    },
    components: {
        Navbar
    },
};
</script>

<style scoped>
.mt {
    margin-top: 1.25rem;
    background: #fff;
}

.main {
    background: #fff;
    padding: 1.5625rem 0;
}

.main-top {
    text-align: center;
}

.main_content {
    padding-bottom: 2.5rem;
    color: #000;
}

.main_content p {
    font-size: 14px;
    margin: .3125rem 0 .9375rem 0;
}

.custom-r {
    margin-right: .75rem;
    color: #969799;
}

.content{
    display: flex;
    width: 90%;
    margin: 0 auto;
    border-top: 1px solid #eaeaea;
    padding: 12px 0;
    color: #5c6488;
}
.item span{
    margin-left: 8px;
}
</style>